<template>
  <div class="wrapper">
    <div class="topbar">
      <div class="footer-icon box-icon" @click="footerVisable = !footerVisable"></div>
      <div class="sider-icon box-icon" @click="siderVisable = !siderVisable"></div>
      <div class="header-icon box-icon" @click="headerVisable = !headerVisable"></div>
    </div>
    <div class="header" v-if="headerVisable">header</div>
    <div class="main">
      <div class="sider" v-if="siderVisable">sider</div>
      <div class="content" v-el-drag-dialog>content
        <div class="drag-dialog">
          <div class="drag-dialog__header"></div>
          drag-box
        </div>
      </div>
    </div>
    <div class="footer" v-if="footerVisable">footer</div>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  directives: { elDragDialog },
  data() {
    return {
      headerVisable: true,
      siderVisable: true,
      footerVisable: true,
    }
  }
}
</script>

<style scoped>
.wrapper,.topbar,.header,.main,.sider,.content,.footer { 
  display: flex; box-sizing: content-box; padding: 10px;
}
.wrapper {
  display: flex;
  height: 520px;
  flex-direction: column;
  justify-content: space-between;
}
.topbar {
  height: 20px;
  flex-direction: row-reverse;
  cursor: pointer;
}
.box-icon {display: inline-block; width: 20px; height: 20px; margin-right: 10px;}
.header-icon { background-color: cadetblue; }
.sider-icon { background-color: cyan; }
.footer-icon { background-color: darkgreen; }
.header {
  height: 40px;
  background-color: cadetblue;
}
.main {
  flex: 1;
  background-color: chartreuse;
}
.sider {
  width: 200px;
  min-width: 100px;
  background-color: cyan;
}
.content {
  flex: 1;
  background-color: darkgoldenrod;
}
.footer {
  height: 30px;
  background-color: darkgreen;
}

.drag-dialog {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #546;
}
.drag-dialog__header {
  height: 30px;
  background-color: green;
}
</style>